<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.1.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/hexo/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/hexo/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/hexo/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/hexo/images/logo.svg" color="#222">

<link rel="stylesheet" href="/hexo/css/main.css">


<link rel="stylesheet" href="/hexo/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"youchen12138.gitee.io","root":"/hexo/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。 12345678910111213141516171819202122232425262728293031323334353637class ListViewDemoPage extends StatelessWidget &amp;#123;  Widget _listItemBu">
<meta property="og:type" content="article">
<meta property="og:title" content="Flutter-ListView">
<meta property="og:url" content="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-ListView/index.html">
<meta property="og:site_name" content="幽辰的博客">
<meta property="og:description" content="ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。 12345678910111213141516171819202122232425262728293031323334353637class ListViewDemoPage extends StatelessWidget &amp;#123;  Widget _listItemBu">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-08-26T08:26:26.000Z">
<meta property="article:modified_time" content="2020-08-26T08:26:44.343Z">
<meta property="article:author" content="幽辰">
<meta property="article:tag" content="Flutter">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-ListView/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'en'
  };
</script>

  <title>Flutter-ListView | 幽辰的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/hexo/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">幽辰的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/hexo/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/hexo/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags<span class="badge">23</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/hexo/categories/" rel="section"><i class="fa fa-th fa-fw"></i>Categories<span class="badge">14</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/hexo/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives<span class="badge">127</span></a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-ListView/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Flutter-ListView
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:26:26 / Modified: 16:26:44" itemprop="dateCreated datePublished" datetime="2020-08-26T16:26:26+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p><code>ListView</code>是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">class ListViewDemoPage extends StatelessWidget &#123;</span><br><span class="line">  Widget _listItemBuilder(BuildContext context, int index)&#123;</span><br><span class="line">    return Container(</span><br><span class="line">      color: Colors.white,</span><br><span class="line">      margin: EdgeInsets.all(8),</span><br><span class="line">      child: Column(</span><br><span class="line">        children: &lt;Widget&gt;[</span><br><span class="line">          Image.network(posts[index].imageUrl),</span><br><span class="line">          SizedBox(height: 16,),</span><br><span class="line">          Text(</span><br><span class="line">            posts[index].title,</span><br><span class="line">            style: Theme.of(context).textTheme.title,</span><br><span class="line">          ),</span><br><span class="line">          Text(</span><br><span class="line">            posts[index].author,</span><br><span class="line">            style: Theme.of(context).textTheme.subhead,</span><br><span class="line">          ),</span><br><span class="line">          SizedBox(height: 16,)</span><br><span class="line">        ],</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return Scaffold(</span><br><span class="line">      backgroundColor: Colors.grey[200],</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        title: Text(&#39;ListView&#39;),</span><br><span class="line">      ),</span><br><span class="line">      body: ListView.builder(</span><br><span class="line">        itemCount: posts.length, &#x2F;&#x2F; post为一个数据源</span><br><span class="line">        itemBuilder: _listItemBuilder,</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="数据源post"><a href="#数据源post" class="headerlink" title="数据源post"></a>数据源post</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br></pre></td><td class="code"><pre><span class="line">class Post &#123;</span><br><span class="line">  Post(&#123;</span><br><span class="line">    this.title,</span><br><span class="line">    this.author,</span><br><span class="line">    this.imageUrl,</span><br><span class="line">    this.description,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  final String title;</span><br><span class="line">  final String author;</span><br><span class="line">  final String imageUrl;</span><br><span class="line">  final String description;</span><br><span class="line"></span><br><span class="line">  bool selected &#x3D; false;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">final List&lt;Post&gt; posts &#x3D; [</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Candy Shop&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;candy-shop.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Childhood in a picture&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;childhood-in-a-picture.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Contained&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;contained.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Dragon&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;dragon.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Free Hugs&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;free_hugs.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Gravity Falls&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;gravity-falls.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Icecream Truck&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;icecreamtruck.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;keyclack&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;keyclack.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Overkill&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;overkill.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Say Hello to Barry&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;say-hello-to-barry.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Space Skull&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;space-skull.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;The Old Fashioned&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;the-old-fashioned.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Tornado&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;tornado.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Undo&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;undo.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;White Dragon&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;white-dragon.jpg&#39;,</span><br><span class="line">  )</span><br><span class="line">];</span><br></pre></td></tr></table></figure>
    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/hexo/tags/Flutter/" rel="tag"># Flutter</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/hexo/2020/08/26/Flutter-%E6%8C%89%E9%92%AE/" rel="prev" title="Flutter-按钮">
      <i class="fa fa-chevron-left"></i> Flutter-按钮
    </a></div>
      <div class="post-nav-item">
    <a href="/hexo/2020/08/26/Flutter-AppBar/" rel="next" title="Flutter-AppBar">
      Flutter-AppBar <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E6%BA%90post"><span class="nav-number">1.</span> <span class="nav-text">数据源post</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="幽辰"
      src="/hexo/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">幽辰</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/hexo/archives/">
        
          <span class="site-state-item-count">127</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/hexo/categories/">
          
        <span class="site-state-item-count">14</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/hexo/tags/">
          
        <span class="site-state-item-count">23</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">幽辰</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a>
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/hexo/lib/anime.min.js"></script>
  <script src="/hexo/lib/velocity/velocity.min.js"></script>
  <script src="/hexo/lib/velocity/velocity.ui.min.js"></script>

<script src="/hexo/js/utils.js"></script>

<script src="/hexo/js/motion.js"></script>


<script src="/hexo/js/schemes/pisces.js"></script>


<script src="/hexo/js/next-boot.js"></script>




  















  

  

</body>
</html>
